<template>
  <div class="box">
    <!-- promotion   后台管理人员可以发布宣传内容，发布活动通知等，可以选择展示的内容 -->
    <div class="header">
        <el-button type="text" @click="dialogFormVisible = true" style="font-size: large;margin-top: 20px;">发布公告</el-button>
        <el-button type="text" style="font-size: large;margin-top: 20px;" @click="handleSearch">只看展示中</el-button>
        <el-button type="text" style="font-size: medium;margin-top: 20px;" v-show="showAll" @click="getAll">查看全部</el-button>
        <el-dialog title="发布公告" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="题目" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="内容" :label-width="formLabelWidth">
                <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form.content">
                </el-input>
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth">
            <el-select v-model="form.type" placeholder="请选择活动类型">
                <el-option label="系统公告" value="系统公告"></el-option>
                <el-option label="线下活动" value="线下活动"></el-option>
            </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
        </el-dialog>
    </div>
    <div class="contentBox">
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
            fixed
            prop="title"
            label="标题"
            width="250">
            </el-table-column>
            <el-table-column
            prop="content"
            label="内容"
            show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
            prop="type"
            label="类型"
            width="170">
            </el-table-column>
            <el-table-column
            prop="proShow"
            label="展示状态"
            width="120"
            >
                <template slot-scope="scope">
                    <div :style="{color: scope.row.proShow === '展示中' ? 'orange' : 'yellowgreen'}">
                    {{ scope.row.proShow }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="140">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.proShow == "展示中"? '取消':'展示'}}</el-button>
                <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block">
        <el-pagination
            layout="prev, pager, next"
            :current-page="pageInfo.pageNum"
            @current-change="handleCurrentChange"
            :page-size="pageInfo.pageSize"
            :hide-on-single-page="true"
            :total="pageInfo.total"
        >
        </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import {PromotionGet,PromotionAdd,PromotionUpdate,PromotionDelete,PromotionSearch} from '@/request/api'
export default {
  data(){
    return{
        dialogFormVisible: false,
        form: {
          title: '',
          content: '',
          type:''
        },
        formLabelWidth: '120px',
        tableData:[],
        params:{
            pageNum:1
        },
        pageInfo:{},
        updateParam:{
            id:null
        },
        delParam:{
            id:null
        },
        showAll:false
    }
  },
  computed:{
      countShow(){
        let countShow = 0
        this.tableData.forEach(item => {
          if(item.proShow == "展示中"){
            countShow++
          }
        })
        return countShow
      }
  },
  methods:{
    async handleSubmit(){
        this.dialogFormVisible = false;
        console.log(this.form);
        let res = await PromotionAdd(this.form);
        console.log(res);
        // 刷新数据
        let res2 = await PromotionGet(this.params)
        this.tableData = res2.data.data.list
        this.tableData.forEach(item =>{
            item.proShow = item.proShow == 1 ? '展示中':'未展示'
        })
        this.pageInfo = res2.data.data
        this.form = {}
    },
    async handleClick(row){
        if(row.proShow == "展示中"){
            this.updateParam.id = row.id;
            await PromotionUpdate(this.updateParam);
            // 修改页面数据
            row.proShow = row.proShow == "未展示" ? '展示中':'未展示'
        }else{
            if(this.countShow < 5){
                this.updateParam.id = row.id;
                await PromotionUpdate(this.updateParam);
                // 修改页面数据
                row.proShow = row.proShow == "未展示" ? '展示中':'未展示'
            }else{
                this.$message.error('展示中的活动不能超过6个');
            }
        }
        
        
    },
    async handleCurrentChange(pageNum){
        console.log("change")
        this.params.pageNum = pageNum;
        let res2 = await PromotionGet(this.params)
        this.tableData = res2.data.data.list
        this.tableData.forEach(item =>{
            item.proShow = item.proShow == 1 ? '展示中':'未展示'
        })
        this.pageInfo = res2.data.data
    },
    async handleDel(row){
        this.delParam.id = row.id;
        await PromotionDelete(this.delParam);
        this.$message.success('删除成功');
        this.tableData.forEach(item =>{
            if(item.id == row.id){
                //移除
                this.tableData.splice(this.tableData.indexOf(item),1)
            }
        })
    },
    async handleSearch(){
        let res = await PromotionSearch()
        this.tableData = res.data.data
        this.tableData.forEach(item =>{
            item.proShow = item.proShow == 1 ? '展示中':'未展示'
        })
        this.showAll = true
    },
    async getAll(){
        this.params.pageNum = 1;
        let res = await PromotionGet(this.params);
        this.tableData = res.data.data.list
        this.tableData.forEach(item =>{
            item.proShow = item.proShow == 1 ? '展示中':'未展示'
        })
        this.pageInfo = res.data.data
        this.showAll = false
    }
    
  },
  async created(){
    let res = await PromotionGet(this.params);
    this.tableData = res.data.data.list
    this.tableData.forEach(item =>{
        item.proShow = item.proShow == 1 ? '展示中':'未展示'
    })
    this.pageInfo = res.data.data
  }
}
</script>

<style scoped>
.box{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.header{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.contentBox{
    margin-left: 50px;
}
.block{
    margin-top: 20px;
    text-align: center;
    margin-top: 20px;   
}
.show-status {
  color: green;
}

.hide-status {
  color: red;
}

</style>
